<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Magazine Grid</title>
	<!-- Minified Stylesheet -->
	<link rel="stylesheet" href="magazinegrid.min.css" type="text/css" charset="utf-8">
	<!-- Plugin Stylesheets -->
	<link rel="stylesheet" href="src/plugins/elements.css" type="text/css" charset="utf-8">
	<!-- Individual Styles -->
	<style type="text/css" media="screen">
		article {
			height: 1004px;
		}
		.grid {
			height: 440px;
			background: #ccc;
		}
		h2 {
			color: #f20;
		}
	</style>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
	
</head>
<body>
<article>
	<section>
		<div class="grid x1">&nbsp;</div>
		<div class="grid x1">&nbsp;</div>
		<div class="grid x1">&nbsp;</div>
		<div class="grid x1">&nbsp;</div>
		<div class="grid x1">&nbsp;</div>
		<div class="grid x1">&nbsp;</div>
		<div class="grid x1">&nbsp;</div>
		<div class="grid x1">&nbsp;</div>
	</section>
	<section class="gutter">
		<h1>This is the <strong>Magazine Grid</strong></h1>
		<p><strong>magazine grid will help you create nice magazine layouts</strong> in HTML5 for the iPad. It creates an 8-column grid and some typographic styles.</p>
		<p>The grid consists of 8 columns with a width of 82 pixels in portrait & 114 pixels in landscape orientation. They have a gap of 16 pixels. It comes with a fix baseline grid of 22 pixels and an optional gutter of 49 pixels. To use magazine grid, you need to include only CSS File. It's highly recommended to use the minified Version. Also, you need to set the viewport width to prevent automatic scaling of your page.</p>
	</section>
	<section class="gutter column2 border">
		<h2>Made for the iPad</h2>
		<p>aGrid.css is designed to work best on the iPad in portrait and landscape orientation. The simple 8 column grid uses the full display without leaving unnecessary margins.</p>		
		<h2>iPhone compatible? Yes, Sir!</h2>
		<p>Of course aGrid.css has a nice fallback style for devices with smaller displays such as the iPhone or iPod Touch. It linearizes the grid and puts the main focus on readability. </p>
		<h2>Lighter than 4kB</h2>
		<p>aGrid.css is superlight to load fast on mobile devices. That is why it doesn't care about oldschool browsers like IE6 or Netscape.</p>
	</section> 
	<footer><li>1</li><li class="current">2</li><li>3</li><li>4</li><li>5</li></footer>
</article>
</body>
</html>
